<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业5: 订单页面, 实现基于Jquery的Ajax</title>
</head>
<style>
    body{
        padding: 10% 30%;
    }
    #orderList{
        list-style-type: none;
    }
</style>
<body>
    <header>
        <h1>JQuery的Ajax练习</h1>
    </header>
    <main>
        <h2>get:获取订单信息</h2>
    </main>
    <ul id="orderList"></ul>

    <h2>post: 提交表单内容</h2>
    <p>姓名:<input type="text" id="username"></p>
    <p>类型:<input type="text" id="role"></p>
    <button id="submit">提交</button>


    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function(){
            $.ajax({
                url: "http://localhost:8029/index/order/orderList",
                type: "get",
                success:function(result){
                    $.each(result, function(index, order){
                        $('#orderList').append('<li>订单人: '+order.username+' 会员等级: '+order.role+'级</li>')
                    });
                }
            })
        })

        $('#submit').on('click', function(){
            $.ajax({
                type: "post",
                url: "http://localhost:8029/index/order/orderSave",
                data : {'username' : $('#username').val(), 'role' : $('#role').val()},
                success: function(result){
                    console.log(result);
                    window.location.reload();
                },
                error: function(error){
                    console.log(error);
                }
            })
        })
    </script>
</body>
</html>